<template>
  <view class="custom-tab-bar">
    <view
      class="tab-bar-item"
      v-for="(item, index) in tabs"
      :class="{ current: index === current }"
      :key="index"
      @click="handleSwitchTab(item)"
    >
      <uni-badge
        class="uni-badge-left-margin w-20px h-20px"
        :text="cartCount"
        :customStyle="{ background: '#66A6DC' }"
        absolute="rightTop"
        v-if="item.label === '购物车'"
        size="small"
      >
        <view class="w-20px h-20px">
          <image
            class="cover-image icon-100"
            :src="index === current ? item.selectedIcon : item.icon"
          />
        </view>
      </uni-badge>

      <image
        v-else
        class="w-20px h-20px cover-image"
        :src="index === current ? item.selectedIcon : item.icon"
      />
      <view class="label">{{ item.label }}</view>
    </view>
  </view>
</template>

<script setup>
import { ref, defineProps } from "vue";
import { message, debounce } from "@/utils/utils";
import UniBadge from "@/components/uni-badge/uni-badge.vue";

const props = defineProps({
  current: {
    type: String || Number,
    default: () => 0,
  },
  cartCount: {
    type: Number,
    default: () => getApp().globalData.cartCount,
  },
});
const user = ref(getApp().globalData.user);
const cachePath = ref({});

const tabs = ref([
  {
    label: "首页",
    icon: "",
    selectedIcon:
      "",
    path: "/pages/home/home",
  },
  {
    label: "赚取积分",
    icon: "",
    selectedIcon:
      "",
    path: "/integralPages/integral/integral",
    redirect: true,
    needLogin: true,
    needBingPhoen: true,
  },
  {
    label: "灵感配方",
    selectedIcon: "",
    icon: "",
    path: "/pages/formula/formula",
  },
  {
    label: "全部产品",
    icon: "",
    selectedIcon:
      "",
    path: "/pages/mall/mall",
  },
  {
    label: "购物车",
    icon: "",
    selectedIcon:
      "",
    path: "/pages/cart/cart",
    needLogin: true,
    needBingPhoen: true,
  },
  {
    label: "个人中心",
    icon: "",
    selectedIcon:
      "",
    path: "/pages/personal/personal",
    needLogin: true,
    needBingPhoen: true,
  },
]);

const handleSwitchTab = debounce(
  ({ label, path, redirect, needLogin, needBingPhoen }) => {
    console.log(label);

    // 埋点
    switch (label) {
      case "首页":
        getApp().emdlz2(
          "track",
          "event",
          "homepage",
          "click",
          "homepage",
          ""
        );
        break;

      case "赚取积分":
        getApp().emdlz2(
          "track",
          "event",
          "homepage",
          "click",
          "earn_points",
          ""
        );
        break;

      case "全部产品":
        getApp().emdlz2(
          "track",
          "event",
          "homepage",
          "click",
          "all_products",
          ""
        );
        break;

      case "购物车":
        getApp().emdlz2("track", "event", "homepage", "click", "cart", "");
        break;

      case "个人中心":
        getApp().emdlz2(
          "track",
          "event",
          "homepage",
          "click",
          "personal_center",
          ""
        );
        break;

      default:
        break;
    }

    if (
      (getApp().globalData.user.nickname === null ||
        getApp().globalData.user.nickname === "" ||
        getApp().globalData.user.nickname === undefined) &&
      needLogin
    ) {
      console.log(123456);
      return getApp().getWechatUserProfile({ path, redirect });
    }

    if (
      (getApp().globalData.user.phone === null ||
        getApp().globalData.user.phone === "") &&
      needBingPhoen
    ) {
      console.log(0);
      uni.setStorageSync("REDIRECT_URI", JSON.stringify({ path, redirect }));
      uni.navigateTo({ url: "/pages/vip/register" });
      return;
    }

    console.log(2);
    if (redirect) return uni.redirectTo({ url: path });
    uni.switchTab({ url: path });
  },
  500,
  false
);
</script>

<style lang="less" scoped>
.custom-tab-bar {
  width: 100%;
  height: 50px;
  background: #3170b4;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  z-index: 999;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

.tab-bar-item {
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-size: 12px;
  color: #a2c0e6;
  padding: 6px 0 0 0;
  box-sizing: border-box;

  .label {
    line-height: 1;
    margin-top: 3px;
  }
  .iconUI {
    position: absolute;
    top: 0;
    left: 0;
  }

  &.current {
    color: white;
  }
}
.uni-badge-left-margin {
  margin-left: 0px;
}
.icon-100 {
  width: 100%;
  height: 100%;
}
</style>
